import { useInViewport } from 'ahooks';
import { Button, Collapse, FloatingPanel, InfiniteScroll, Mask, Space, Tag, Toast } from 'antd-mobile'
import { FloatingPanelRef } from 'antd-mobile/es/components/floating-panel';
import router from 'next/router'
import { useEffect, useRef } from 'react';
import { judgeLoad } from '../../libs/utils';
import { DingdanStat } from '../../models/enums'
import { DingdanService } from '../../services';
import { advlist } from '../../services/dingdan.service';
import Empty from '../Empty';
import styles from './style.module.scss'

interface Props {
  isPop: boolean;
  click: number;
  setIsPop: () => void
  adv: advlist[]
  hasMore: boolean
  getAdv: (skip: number) => void
}

const anchors = [0, 100, 400, 600]

export default function Inform({ isPop, setIsPop, adv, getAdv, hasMore, click }: Props) {

  const ref = useRef<FloatingPanelRef>(null)
  const divRef = useRef<HTMLDivElement>(null)

  async function dealGoods(id: string, flag: boolean) {
    const res = await DingdanService.deal(id, flag)
    if (res.stat === "OK") Toast.show('处理成功')
    else Toast.show(res.msg)
  }

  const inViewPort = useInViewport(divRef);

  useEffect(() => {
    if (isPop) {
      ref.current?.setHeight(400)
    } else {
      ref.current?.setHeight(0)
    }
  }, [isPop, click])

  return (
    <div >
      <Mask
        className={styles.mask}
        visible={isPop && inViewPort}
        onMaskClick={() => setIsPop()}
        opacity='thin'
      />
      <FloatingPanel
        anchors={anchors}
        ref={ref}
      >
        <div className={styles.message} ref={divRef}>
          <h4>通知内容</h4>
          <Collapse
            onChange={async (key) => {
              if (key) {
                const res = await DingdanService.see(key)
                if (res.stat === 'OK') console.log('查看成功');
              }
            }}
            accordion>
            {
              adv.map(item => {
                const { name, address, phone, note, userId } = item.dingdan
                const { prices, names, confirm } = item.cart
                const info = ['收件人', '收获地址', '联系电话', '备注', '总价']
                const infoKey = [name, address, phone, note, item.cart.allprice]

                return (
                  <Collapse.Panel
                    disabled={confirm === DingdanStat.Cancel}
                    key={item._id}
                    title={
                      <div className={styles.adv}>
                        <span>{item.book.title}</span>
                        <div className={styles.tags}>
                          {confirm === DingdanStat.Cancel &&
                            <Tag color='default'>同学已取消订单,不用送了</Tag>}
                          {confirm === DingdanStat.Queren &&
                            <Tag color='success'>同学已经确认收货</Tag>}
                          {confirm === DingdanStat.Waiting &&
                            <Tag color='warning'>货物需要派送</Tag>}
                          {confirm === DingdanStat.Daohuo &&
                            <Tag color='warning'>货物送达-未确认收货</Tag>}
                          {confirm === DingdanStat.Empty &&
                            <Tag color='danger'>缺货/断货</Tag>}
                        </div>
                        {confirm !== DingdanStat.Cancel &&
                          <>
                            {!item.seen && <Tag color='danger'>请查看</Tag>}
                            {item.seen && <Tag color='success'>已查看</Tag>}
                          </>
                        }
                      </div>}
                  >
                    <div className={styles.advs}>
                      <nav
                        onClick={() => router.push('/user/' + userId + '/dynamic')}
                        className={styles.user}>
                        {info.map((item, idx) => (
                          <div key={idx} className={styles.item}>
                            <aside>
                              <span>{item}</span>
                            </aside>
                            <main>{infoKey[idx]}</main>
                          </div>
                        ))}
                        {confirm === DingdanStat.Waiting &&
                          <Space>
                            <Button
                              disabled={confirm !== DingdanStat.Waiting}
                              onClick={async e => {
                                e.stopPropagation()
                                await dealGoods(item._id, true)
                              }}
                              size='small' color='success'>已送达</Button>
                            <Button
                              disabled={confirm !== DingdanStat.Waiting}
                              onClick={async e => {
                                e.stopPropagation()
                                await dealGoods(item._id, false)
                              }}
                              size='small' color='danger'>没货了</Button>
                          </Space>
                        }
                      </nav>
                      <main
                        onClick={() => router.push('/goods/' + item.book._id)}
                      >
                        <h3>{item.book.title}</h3>
                        {
                          names.map((name, i) =>
                            <div key={i} className={styles.book}>
                              <Tag>{name}</Tag>
                              <span>价格: {prices[i]}</span>
                            </div>
                          )
                        }
                      </main>
                    </div>

                  </Collapse.Panel>
                )
              })
            }
          </Collapse>
          {adv.length === 0 && <Empty />}
          {
            !judgeLoad(adv, hasMore) &&
            <InfiniteScroll
              loadMore={async () => getAdv(adv.length)}
              hasMore={hasMore}
            />
          }
        </div>
      </FloatingPanel>
    </div>

  )
}
